// import React from 'react';
// import { DndProvider, useDragLayer } from 'react-dnd';
// import { HTML5Backend } from 'react-dnd-html5-backend';
// import DraggableImageList from '../../components/cstydd/DraggableImageList/index';
// import DroppableArea from '../../components/cstydd/DroppableArea/index';
  
// function Rolle() {
//   return (
//     <DndProvider backend={HTML5Backend}>
//       <div style={{ display: 'flex', justifyContent: 'space-between', padding: '20px' }}>
//         <DraggableImageList />
//         <DroppableArea />
//       </div>
//     </DndProvider>
//   );
// }
  
// export default Rolle;

// import React from 'react';
// import DraggableImages from '../../components/cstydd/DraggableImageList';
// import DroppableArea from '../../components/cstydd/DroppableArea';
  
// function App() {
//   return (
//     <div className="App">
//       <div style={{ float: 'left', width: '45%', marginRight: '5%' }}>
//         <h2>Draggable Images</h2>
//         <DraggableImages />
//       </div>
//       <div style={{ float: 'left', width: '50%' }}>
//         <h2>Droppable Area</h2>
//         <DroppableArea />
//       </div>
//     </div>
//   );
// }
  
// export default App;


// App.js
// App.js
// import React from 'react';
// import LeftComponent from '../../components/cstydd/DraggableImageList';
// import RightComponent from '../../components/cstydd/DroppableArea';
  
// function App() {
//   // 注意：LeftComponent目前没有直接传递onDragEnd，因为在这个例子中我们不需要它
//   // 如果需要处理拖动结束时的逻辑，可以添加相应的props和回调函数
  
//   return (
//     <div style={{ display: 'flex', justifyContent: 'space-around', padding: '20px' }}>
//       <LeftComponent />
//       <RightComponent />
//     </div>
//   );
// }
  
// export default App;

// import React, { useRef, useState } from 'react';
  
// function ColorPickerAndCanvas() {
//   // 用于存储当前选中的颜色
//   const [currentColor, setCurrentColor] = useState('#FF0000'); // 默认红色
  
//   // Canvas的引用
//   const canvasRef = useRef(null);
  
//   // 组件挂载时设置Canvas的初始绘制
//   React.useEffect(() => {
//     const canvas = canvasRef.current;
//     const ctx = canvas.getContext('2d');
  
//     // 清除之前的绘制
//     ctx.clearRect(0, 0, canvas.width, canvas.height);
  
//     // 使用当前颜色绘制一个矩形
//     ctx.fillStyle = currentColor;
//     ctx.fillRect(10, 10, 100, 100);
//   }, [currentColor]); // 依赖项数组包含currentColor，以便每次颜色改变时重新绘制
  
//   // 颜色选项数组
//   const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];
  
//   // 处理颜色点击事件
//   const handleColorClick = (color) => {
//     setCurrentColor(color);
//   };
  
//   return (
//     <div>
//       {/* 颜色选项按钮 */}
//       {colors.map((color, index) => (
//         <button key={index} style={{ backgroundColor: color,width:'50px',height:'50px' }} onClick={() => handleColorClick(color)}>
//           {/* 这里可以添加颜色名称或图标，但为了简洁，我们仅使用颜色块 */}
//         </button>
//       ))}
  
//       {/* Canvas元素 */}
//       <canvas ref={canvasRef} width="200" height="200" style={{ marginTop: '20px' }}></canvas>
//     </div>
//   );
// }
  
// export default ColorPickerAndCanvas;


// import React, { useEffect, useState, useRef, ChangeEvent, } from 'react';
// import { Button, Drawer,Modal } from 'antd';
//  import yanse from '../../image/1.png'

// import { UploadOutlined,CloudUploadOutlined } from '@ant-design/icons';

//  const ColorInput = ({ label, value, onChange }) => (
//   <div>
//     <label>{label}</label>
//     <input
//       type="color"
//       value={value}
//       onChange={(e) => onChange(e.target.value)}
//     />
//   </div>
// );

// function Huabu(isInputVisible) {
//     const [divs, setDivs] = useState([]);
//     const [backgroundColor, setBackgroundColor] = useState('#FFFFFF');
//     const [documentColor, setDocumentColor] = useState('#000000');
//     // 储存用户选择的图像文件
//     const [selectedImage, setSelectedImage] = useState(null);
//     // 存储处理后的图像数据（初始为 null）
//     const [processedImageData, setProcessedImageData] = useState(null);
//     // 用于获取 canvas 元素的引用
//     const canvasRef = useRef(null);
//     // 用于存储点击的颜色
//     const [clickedColor, setClickedColor] = useState('');

//     // 处理图像选择变化的函数
//     const handleImageChange = (e) => {
//         const file = e.target.files?.[0];
//         if (file) {
//             setSelectedImage(file);
//         }
//     };

//     // 处理颜色变化的函数
//     const handleBackgroundColorChange = (newColor) => {
//         setBackgroundColor(newColor);
//     };
  
//     const handleDocumentColorChange = (newColor) => {
//         setDocumentColor(newColor);
//     };

//     const showDrawer = () => {
//         setOpen(true);
//     };

//     const onClose = () => {
//         setOpen(false);
//     };


//     // 定义一个函数来处理点击事件，向divs数组中添加一个新元素
//     const addDiv = () => {
//         // 假设我们只是简单地向数组中添加一个新索引
//         setDivs([...divs, divs.length]);
//     };
//     const [inputs, setInputs] = useState([]);


//     const [scale, setScale] = useState(1);

//     // // 处理进度条变化的事件
//     const handleScaleChange = (e) => {
  
//         const newValue = parseFloat(e.target.value) / 80 + 0.5; // 注意这里使用了 parseFloat 来确保得到的是数字
//         setScale(newValue);
//     };
    
  











// useEffect(() => {
//   // 获取所有可拖动的图片
//   const draggableImages = document.querySelectorAll('.draggable-img');

//   // 为每个可拖动的图片添加事件监听器
//   draggableImages.forEach(img => {
//    img.addEventListener('dragstart', (event) => {
//         event.dataTransfer.setData('textmain', img.src)
//         img.style.opacity = '0.5';
//       })
//       img.addEventListener('dragend', (event) => {
//         img.style.opacity = '1'
//       })

//     // Allow dragging the image itself
//     img.draggable = true;
//     img.addEventListener('drag', function (event) {
//       // Get the current mouse position
//       const x = event.clientX;
//       const y = event.clientY;
      
//       // Move the image with the mouse
//       img.style.left = `${x}px`;
//       img.style.top = `${y}px`;
//     });
//   });
// // 111
//   // 为目标盒子添加拖放事件监听器
//   const dropContainer = document.getElementById('combined')
 
//     dropContainer.addEventListener('dragover', function (event) {
//       event.preventDefault(); // 阻止默认处理（默认不允许放置）
//     });

//      dropContainer.addEventListener('drop', (event) => {
//       event.preventDefault(); // 阻止默认处理

//       // 获取拖动的数据（这里是图片的src）
//       const imgSrc = event.dataTransfer.getData('textmain');  // 修正了MIME类型为'textmain'

//       // 创建一个新的图片元素
//         const imgBox = document.createElement('div');
//       imgBox.style.position = 'relative';
//        const newImg = document.createElement('img');
//       newImg.src = imgSrc;
//       newImg.style.width = '100px';
//       newImg.style.height = '100px'; // 根据需要设置
//       newImg.style.position = 'absolute'; // 设置绝对定位
//        newImg.draggable = false;
//       let isResizing = false;
//       let isRotating = false;
//       let startSize = { width: 200, height: 200 };
//       let mouseDownPoint = { x: 0, y: 0 };
//       let rotationAnle = 0;
//       newImg.addEventListener('click', (event) => {
//         const div = document.createElement('div');
//         div.style.position = 'absolute';
//         div.style.width = '30px';
//         div.style.height = '30px';
//         div.style.backgroundColor = 'red';
//         div.style.top = '30px'
//         div.style.left = '100px';
//         div.style.zIndex = '10';

//         div.style.borderRadius = '50%';
//         // 添加鼠标按下的事件监听器
//         div.addEventListener('mousedown', (redBoxEvent) => {
//           isRotating = true;
//           mouseDownPoint.x = redBoxEvent.clientX;
//           mouseDownPoint.y = redBoxEvent.clientY;
//         });
//         div.addEventListener('mousemove', (redBoxEvent) => {
//           if (isRotating) {
//             const currentMouseX = redBoxEvent.clientX;
//             const currentMouseY = redBoxEvent.clientY;
//             const deltaX = currentMouseX - mouseDownPoint.x;
//             const deltaY = currentMouseY - mouseDownPoint.y;
//             rotationAnle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
//             newImg.style.transform = `rotate(${rotationAnle}deg)`
//           }
//         });
//         div.addEventListener('mouseup', () => {
//           isRotating = false;
//         });
//         imgBox.appendChild(div);
//       });
// // 鼠标按下事件
//       newImg.addEventListener('mousedown', (event) => {
//         const rect = newImg.getBoundingClientRect();
//         const mouseX = event.clientX;
//         const mouseY = event.clientY;
//         if (mouseX > rect.right - 10 && mouseY < 10) {
//           isResizing = true;
//           mouseDownPoint.x = mouseX;
//           mouseDownPoint.y = mouseY;
//         } else if (mouseX > rect.right - 10 && mouseY > rect.bottom - 10) {
//           isResizing = true;
//           startSize.width = rect.width;
//           startSize.height = rect.height;
//           mouseDownPoint.x = mouseX;
//           mouseDownPoint.y = mouseY;
//         } else {
//           isRotating = false;
//           isResizing = false;
//         }
//       });
//       newImg.addEventListener('mousemove', (event) => {
//         if (isResizing) {
//           newImg.style.transform = `rotate(${rotationAnle}deg)`;
//         } else if (isRotating) {
//           const currentMouseX = event.clientX;
//           const currentMouseY = event.clientY;
//           const deltaX = currentMouseX - mouseDownPoint.x;
//           const deltaY = currentMouseY - mouseDownPoint.y;
//           let scalex=(startSize.width + deltaX) / startSize.width;
//           let scaley=(startSize.height + deltaY) / startSize.height;
//           const minScale = 0.5;
//           console.log(scalex, scaley);
//           // console.log();
          
//           const maxScale = 2;
//           scalex = Math.max(minScale, Math.min(maxScale, scalex));
//           scaley = Math.max(minScale, Math.min(maxScale, scaley));
          
//           newImg.width=Math.floor(startSize.width * scalex);
//           newImg.height=Math.floor(startSize.height * scaley);
//         }
//       });
//         newImg.addEventListener('mouseup', (event) => {
//         isResizing = false;
//         isRotating = false;
//       });
//        imgBox.appendChild(newImg);
    
//       // 获取鼠标在视口中的位置
//           const containerRect=dropContainer.getBoundingClientRect();
//       const x=event.clientX-containerRect.left;
//       const y=event.clientY-containerRect.top;// 相对于dropContainer的顶部位置

//       // 将图片定位到鼠标释放的位置
//       newImg.style.left = `${x}px`;
//       newImg.style.top = `${y}px`;

//       // 将新图片添加到目标容器中
//        dropContainer.appendChild(imgBox);
//        //   20
//      });
//      if (selectedImage && canvasRef.current) {
//       const canvas = canvasRef.current;
//       const ctx = canvas.getContext('2d');

//       if (!ctx) {
//         console.error('无法获取 2D 绘图上下文');
//         return;
//       }

//         // 绘制原始图像到 canvas
//       const image = new Image();
//       image.src = URL.createObjectURL(selectedImage);
//       image.onload = () => {
//         canvas.width = image.width;
//         canvas.height = image.height;
//         ctx.drawImage(image, 0, 0);
//       };
//     }
// }, [selectedImage]);

  

















  
// const [isModalOpen, setIsModalOpen] = useState(false);

//   const showModal = () => {
//     setIsModalOpen(true);
//   };

//   const handleOk = () => {
//     setIsModalOpen(false);
//   };

//   const handleCancel = () => {
//     setIsModalOpen(false);
//   };

//   const [open, setOpen] = useState(false);
//   const [loading, setLoading] = useState(true);

//   const showLoading = () => {
//     setOpen(true);
//     setLoading(true);

//     // Simple loading mock. You should add cleanup logic in real world.
//     setTimeout(() => {
//       setLoading(false);
//     }, 2000);
//   };
//    // 处理鼠标点击获取颜色的函数
//   const handleCanvasClick = (e) => {
//     if (canvasRef.current) {
//       const canvas = canvasRef.current;
//       const ctx = canvas.getContext('2d');

//       if (!ctx) {
//         console.error('无法获取 2D 绘图上下文');
//         return;
//       }

//       const rect = canvas.getBoundingClientRect();
//       const x = e.clientX - rect.left;
//       const y = e.clientY - rect.top;

//       const pixelData = ctx.getImageData(x, y, 1, 1).data;
//       const color = `rgba(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]}, ${pixelData[3] / 255})`;
//       setClickedColor(color);
//     }
//   };

//   // 模拟根据点击颜色删除相同颜色的函数
//   const simulateColorRemoval = () => {
//     if (selectedImage && canvasRef.current && clickedColor) {
//       const canvas = canvasRef.current;
//       const ctx = canvas.getContext('2d');

//       if (!ctx) {
//         console.error('无法获取 2D 绘图上下文');
//         return;
//       }

//         // 获取图像数据
//       const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
//       const data = imageData.data;

//       // 遍历图像数据中的每个像素
//       for (let i = 0; i < data.length; i += 4) {
//         const currentColor = `rgba(${data[i]}, ${data[i + 1]}, ${data[i + 2]}, ${data[i + 3] / 255})`;
//         if (currentColor === clickedColor) {
//             // 如果像素颜色与点击的颜色相同，将其设置为透明
//           data[i] = 0;
//           data[i + 1] = 0;
//           data[i + 2] = 0;
//           data[i + 3] = 0;
//         }
//       }
//  // 将修改后的图像数据放回 canvas
//       ctx.putImageData(imageData, 0, 0);

//       // 将处理后的图像数据转换为 base64 格式并存储
//       const dataURL = canvas.toDataURL();
//       setProcessedImageData(dataURL);
//     }}
// const handleDownload = () => {
//     if (processedImageData) {
//       // 创建一个临时的a标签来触发下载
//       const link = document.createElement('a');
//       link.href = processedImageData;
//       link.download = 'processed_image.png'; // 设置下载文件的名称
//       link.click(); // 触发下载

//       // 清理
//       URL.revokeObjectURL(link.href); // 释放由createObjectURL创建的URL
//       link.remove(); // 移除a标签
//     }
//   };
//    const [fileList, setFileList] = useState([]);
// const onChange= ({ fileList: newFileList }) => {
//     setFileList(newFileList);
//   };

//   const onPreview = async (file) => {
//     let src = file.url;
//     if (!src) {
//       src = await new Promise((resolve) => {
//         const reader = new FileReader();
//         reader.readAsDataURL(file.originFileObj);
//         reader.onload = () => resolve(reader.result);
//       });
//     }
//     const image = new Image();
//     image.src = src;
//     const imgWindow = window.open(src);
//     imgWindow?.document.write(image.outerHTML);
//   };
// return (
//       <div>
//            <div>
//             <div>
//               <div
//                  id='combined'
//                   style={{
//                      backgroundColor: backgroundColor, color: documentColor,
//                     // 1
//                       width: "300px",
//                       height: "500px",
//                       margin: '20px 400px',
//                       border: '1px solid #000',
//                       borderRadius: "15px",
//                       background: "#fff",
//                       display: 'flex',
//                       flexWrap: 'nowrap',
//                       flexDirection: 'column',
//                       transition: 'transform 2s ease', // 平滑过渡效果
//                       transform: `scale(${scale})` // 应用缩放
//                   }}
//               >
//                   {/* 这里可以放置内容，比如文本或子组件，但不与<Shi>组件直接相关 */}
                   
//               </div>
// </div>
//               {divs.map((_, i) => (
//                   <div id='buhau' key={i} style={{
//                       width: "300px",
//                       height: "500px",
//                       marginTop: '100px',
//                       margin: '20px 400px',
//                       border: '1px solid #000',
//                       boxShadow: "10px 10px 5px rgba(0, 0, 0, 0.6)",
//                       borderRadius: "15px",
//                       background: "#fff" ,

//                       display: 'flex',
//                       flexWrap: 'nowrap',
//                       flexDirection: 'column',
//                       transition: 'transform 2s ease', // 平滑过渡效果
//                       transform: `scale(${scale})` // 应用缩放
//                   }}>
                    
//                   </div>
//               ))}
//  <Button style={{textAlign: 'center'}} type='primary' onClick={addDiv}>添加画布</Button>
            
//           </div>
//           <div className='tiao'>
//               <input
//                   type="range"
//                   min="0"
//                   max="100"
//                   value={Math.floor((scale - 0.5) * 80)} // 将缩放比例转换回进度条的值
//                   onChange={handleScaleChange}
//                   style={{ marginTop: '10px' }}
//               />
//           </div>
//            <Button className='scl' type="primary" onClick={showModal} icon={<UploadOutlined />}>
//         上传
//       </Button>
//       <Button style={{ position: 'absolute',left: '92%',top:'10px',zIndex:'999999'}} onClick={handleDownload} disabled={!processedImageData}><CloudUploadOutlined />导出</Button>
//        <Modal style={{width:"500px",height:'500px'}} footer={true} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
//       <input type="file" onChange={handleImageChange} />
//       <canvas style={{width:"300px",height:"300px"}}  ref={canvasRef} onClick={handleCanvasClick}></canvas>
//       <button onClick={simulateColorRemoval}>删除点击颜色</button>
//       </Modal>
//             {/* <Button className='scl'>上传</Button> */}
//                  <div className='yss'  onClick={showLoading}>
                 
//         <img src={yanse} alt="" />
       
//       </div>
//       <Drawer
//         closable
//         destroyOnClose
//         placement="right"
//         open={open}
//         loading={loading}
//         onClose={() => setOpen(false)}
//       >
       
          
//      <ColorInput  label="背景颜色" value={backgroundColor}  onChange={handleBackgroundColorChange}  />
//       <ColorInput  label="文档颜色"  value={documentColor}  onChange={handleDocumentColorChange}  />
//       </Drawer>
      
//       </div>
//   );
// }

// export default Huabu;


import React, { Component } from 'react';  
import ResizableRect from 'react-resizable-rotatable-draggable-radiusable'; // 确保这个库存在并正确导入  
  
class App extends Component {  
  constructor() {  
    super();  
    this.state = {  
      width: 100,  
      height: 100,  
      top: 100,  
      left: 100,  
      rotateAngle: 0,  
      borderRadius: {  
        rtl: 0, // 假设这些键是库所需的，或者您可以自定义  
        rtr: 0,  
        rbr: 0,  
        rbl: 0,  
      },  
    };  
  }  
  
  handleResize = (style, isShiftKey, type) => {  
    const { top, left, width, height, rtl, rtr, rbr, rbl } = style; // 假设style包含这些属性  
    this.setState({  
      top: Math.round(top),  
      left: Math.round(left),  
      width: Math.round(width),  
      height: Math.round(height),  
      borderRadius: {  
        rtl: Math.round(rtl), // 假设这些值需要四舍五入  
        rtr: Math.round(rtr),  
        rbr: Math.round(rbr),  
        rbl: Math.round(rbl),  
      },  
    });  
  };  
  
  handleRotate = (rotateAngle) => {  
    this.setState({ rotateAngle });  
  };  
  
  handleDrag = (deltaX, deltaY) => {  
    this.setState({  
      left: this.state.left + deltaX,  
      top: this.state.top + deltaY,  
    });  
  };  
  
  render() {  
    const { width, height, top, left, rotateAngle, borderRadius } = this.state;  
    return (  
      <div className="App">  
        <ResizableRect  
          left={left}  
          top={top}  
          width={width}  
          height={height}  
          rotateAngle={rotateAngle}  
          borderRadius={borderRadius} // 确保ResizableRect支持这个prop  
          onDrag={this.handleDrag}  
          onResize={this.handleResize}  
          onRotate={this.handleRotate}  
          // 其他props...  
        />  
      </div>  
    );  
  }  
}  
  
export default App;
